<template>
  <div ref="container" class="Business text-white">
    <div class="out-btn" @click="cancle">退出编辑</div>
    <div class="nav-view">
      <div class="btn-list">
        <div
          class="btn"
          :class="activetype === '' ? 'active' : ''"
          @click="typeChange('')"
        >
          编辑睡眠学院
        </div>
        <div
          class="btn"
          :class="activetype === 'zeren' ? 'active' : ''"
          @click="typeChange('zeren')"
        >
          编辑责任页面
        </div>
        <div
          class="btn"
          :class="activetype === 'kehu' ? 'active' : ''"
          @click="typeChange('kehu')"
        >
          编辑商业客户页面
        </div>
      </div>
      <div class="nav-list-view">
        <div
          v-for="nav in classList"
          :key="nav.Id"
          class="nav"
          :class="addParams.Id === nav.Id ? 'active' : ''"
          @click="GetSleepFun(nav)"
        >
          <span>{{ nav.TypeName }}</span>
        </div>
        <div v-if="activetype === ''" class="add" @click.stop="addItem">
          <icons class="icon" name="jiahao" />
        </div>
      </div>
      <div v-if="addParams.Id && activetype === ''" class="editor-view">
        <input v-model="addParams.TypeName" placeholder="分类名称" />
        <input class="num" v-model="addParams.SortNum" placeholder="序号" />
        <div class="btn" @click="UpdateSleepTypeFun">保存编辑</div>
        <div class="eidtor" @click="DeleteSleepTypeFun">删除分类</div>
      </div>
      <div v-if="addParams.type === 'new'" class="editor-view">
        <input v-model="addParams.TypeName" placeholder="分类名称" />
        <input class="num" v-model="addParams.SortNum" placeholder="序号" />
        <div class="btn" @click="InsertSleepTypeFun">新增分类</div>
      </div>
    </div>
    <div class="card-view">
      <div v-if="addParams.Id" class="card" @click="addCard">
        <icons class="icon" name="jiahao" />
      </div>
      <div
        v-for="item in productList"
        :key="item.Id"
        class="card"
        :class="current === item.Id ? 'active' : ''"
        @click="GetSleepDetailFun(item.Id)"
      >
        <div
          v-if="activetype !== ''"
          class="icon-btn"
          :class="isActive(item.Id) ? 'active' : ''"
        >
          <icons class="icon" name="yes" />
        </div>
        <img :src="item.IndexPicPath" alt="" />
        <div class="title ellipsis-text">{{ item.TitleA }}</div>
      </div>
    </div>
    <div v-if="activetype !== ''" class="add-btns" @click="subData">
      <span
        >保存{{
          activetype === "zeren" ? "责任页面数据" : "商业客户页面数据"
        }}</span
      >
    </div>
    <div
      v-if="productInfo"
      class="content-view"
      :class="productInfo.TypeId ? '' : 'no'"
    >
      <div v-if="activetype === ''" class="tool-view">
        <div v-if="!preview" class="btn a" @click="preview = true">编辑</div>
        <div v-if="preview" class="btn b" @click="preview = false">预览</div>
        <div v-if="productInfo.Id" class="btn c" @click="DeleteSleepFun">
          删除
        </div>
        <div v-if="preview" class="btn c" @click="EditSleepFun">保存</div>
      </div>
      <div class="fengmian">
        <div v-if="preview" class="upload-img-btn">
          <div class="upload-view" @click="showCropperFun('IndexPic')">
            上传封面图片
          </div>
        </div>
        <img :src="productInfo.IndexPicPath" alt="" />
      </div>
      <div class="top-view">
        <div class="tag">{{ productInfo.TypeName }}</div>
        <div v-if="preview" class="title">
          <input type="text" v-model="productInfo.TitleA" placeholder="标题" />
        </div>
        <div v-else class="title">
          {{ productInfo.TitleA }}
        </div>
        <div v-if="preview" class="desc">
          <textarea
            class="textarea"
            placeholder="输入介绍"
            v-model="productInfo.IntroduceA"
          ></textarea>
        </div>
        <div v-else class="desc">
          {{ productInfo.IntroduceA }}
        </div>
      </div>
      <div class="card-text-view">
        <div class="card-item img" :style="contentStyle">
          <div v-if="preview" class="upload-img-btn">
            <div class="upload-view" @click="showCropperFun('PicA')">
              上传图片
            </div>
          </div>
          <img :src="productInfo.LargePicA" alt="" />
        </div>
        <div class="card-item img" :style="contentStyle">
          <div v-if="preview" class="upload-img-btn">
            <div class="upload-view" @click="showCropperFun('PicB')">
              上传图片
            </div>
          </div>
          <img :src="productInfo.LargePicB" alt="" />
        </div>
      </div>
      <div class="center-view">
        <div v-if="preview" class="title">
          <input type="text" v-model="productInfo.TitleB" placeholder="标题" />
        </div>
        <div v-else class="title">{{ productInfo.TitleB }}</div>
        <div v-if="preview" class="desc">
          <textarea
            class="textarea"
            placeholder="输入介绍"
            v-model="productInfo.IntroduceB"
          ></textarea>
        </div>
        <div v-else class="desc">
          {{ productInfo.IntroduceB }}
        </div>
      </div>
      <div class="card-text-view">
        <div class="card-item textr" :style="contentStyle">
          <div v-if="preview" class="title">
            <input
              type="text"
              v-model="productInfo.TitleC"
              placeholder="标题"
            />
          </div>
          <div v-else class="title">{{ productInfo.TitleC }}</div>
          <div v-if="preview" class="desc">
            <textarea
              class="textarea"
              placeholder="输入介绍"
              v-model="productInfo.IntroduceC"
            ></textarea>
          </div>
          <div v-else class="desc">
            {{ productInfo.IntroduceC }}
          </div>
        </div>
        <div class="card-item img" :style="contentStyle">
          <div v-if="preview" class="upload-img-btn">
            <div class="upload-view" @click="showCropperFun('PicC')">
              上传图片
            </div>
          </div>
          <img class="cotiner" :src="productInfo.LargePicC" alt="" />
        </div>
      </div>
    </div>
  </div>
  <div v-if="showCropper" class="copper-view">
    <Copper
      :show="false"
      :fixed="false"
      :fixedNumber="curentData.fixedNumber"
      :url="curentData.url"
      @confirm="confirm"
    />
  </div>
</template>

<script lang="ts" setup>
import Cookies from "js-cookie";
import Copper from "@/components/Copper/index.vue";
import { computed, ref, onMounted } from "vue";
import {
  GetSleepType,
  DeleteSleepType,
  UpdateSleepType,
  InsertSleepType,
  GetSleep,
  GetSleepDetail,
  UploadFile,
  EditSleep,
  DeleteSleep,
  EidtResponsibility,
  EidtCommercialCustomer,
} from "@/server";
import { useAppStore } from "@/store/modules/user";
const store = useAppStore();
const current = ref(0);
const showCropper = ref(false);
const curentImg = ref("");
const activetype = ref("");
const addParams = ref({
  TypeName: "",
  SortNum: 1,
  Operator: Cookies.get("token"),
}) as any;
const container = ref<HTMLElement | null>(null);
const contentStyle = ref({ width: "844px", height: "50%" });
const handleResize: ResizeObserverCallback = (entries) => {
  if (entries[0].target) {
    const containerWidth = entries[0].contentRect.width;
    const w = (containerWidth - containerWidth * 0.12) / 2;
    contentStyle.value = { width: w + "px", height: w + "px" };
  }
};
const emits = defineEmits(["cancle"]);
const cancle = () => {
  emits("cancle");
};
const preview = ref(false);
const classList = ref([]) as any;
const addItem = () => {
  addParams.value = {
    type: "new",
    TypeName: "",
    SortNum: 0,
  };
};

const typeChange = (type: string) => {
  activetype.value = type;
  if (type !== "zeren") {
    classList.value = classList.value.map((e: any) => {
      e.checked = false;
      return e;
    });
  }
  SleepInfo.value = [];
};
const subData = async () => {
  let res: any = null;
  if (activetype.value === "zeren") {
    res = await EidtResponsibility({
      SleepInfo: SleepInfo.value,
      Operator: Cookies.get("token"),
    });
  } else {
    res = await EidtCommercialCustomer({
      SleepInfo: SleepInfo.value,
      Operator: Cookies.get("token"),
    });
  }
  if (res.Tag === 1) {
    store.success(res.Message); // 错误提示
  } else {
    store.error(res.Message); // 错误提示
  }
};
const addCard = () => {
  productInfo.value = JSON.parse(JSON.stringify(addPa));
  console.log(JSON.stringify(addParams.value));

  productInfo.value.TypeId = addParams.value.Id;
  productInfo.value.TypeName = addParams.value.TypeName;
};
const curentData = computed(() => {
  if (curentImg.value === "PicA") {
    return {
      url: productInfo.value.LargePicA,
      fixedNumber: [800, 800],
    };
  } else if (curentImg.value === "PicB") {
    return {
      url: productInfo.value.LargePicB,
      fixedNumber: [800, 800],
    };
  } else if (curentImg.value === "PicC") {
    return {
      url: productInfo.value.LargePicC,
      fixedNumber: [684, 512],
    };
  } else if (curentImg.value === "IndexPic") {
    return {
      url: productInfo.value.IndexPicPath,
      fixedNumber: [682, 456],
    };
  } else {
    return {
      url: "",
      fixedNumber: [1, 1],
    };
  }
});
const addPa = {
  IndexPic: "",
  MiddlePicA: "",
  LargePicA: "",
  MiddlePicB: "",
  LargePicB: "",
  MiddlePicC: "",
  LargePicC: "",
  TypeName: "",
  Id: "",
  TypeId: "",
  TitleA: "",
  IntroduceA: "",
  TitleB: "",
  IntroduceB: "",
  TitleC: "",
  IntroduceC: "",
  PicA: "",
  PicB: "",
  PicC: "",
  Operator: "",
};
const confirm = async (file: any) => {
  if (file) {
    let newimgdata = URL.createObjectURL(file);
    const fd = new FormData();
    fd.append("file", file);
    const res: any = await UploadFile(fd);
    if (res.Tag === 1) {
      const FileName = res.Data[0].FileName;
      if (curentImg.value === "PicA") {
        productInfo.value.PicA = FileName;
        productInfo.value.LargePicA = newimgdata;
      } else if (curentImg.value === "PicB") {
        productInfo.value.PicB = FileName;
        productInfo.value.LargePicB = newimgdata;
      } else if (curentImg.value === "PicC") {
        productInfo.value.PicC = FileName;
        productInfo.value.LargePicC = newimgdata;
      } else if (curentImg.value === "IndexPic") {
        productInfo.value.IndexPic = FileName;
        productInfo.value.IndexPicPath = newimgdata;
      }
    } else {
      store.error(res.Message); // 错误提示
    }
  }
  showCropper.value = false;
};
const showCropperFun = (type: string) => {
  curentImg.value = type;
  showCropper.value = true;
};
const isActive = (id: number) => {
  const index = SleepInfo.value.findIndex((e: any) => e.Id === id);
  return index > -1;
};
const productInfo = ref(null) as any;
const GetSleepDetailFun = async (id: number) => {
  if (activetype.value === "zeren") {
    const index = SleepInfo.value.findIndex((e: any) => e.Id === id);
    if (index == -1) {
      SleepInfo.value.push({
        Id: id,
        TypeId: addParams.value.Id,
      });
    } else {
      // 使用splice删除指定下标的元素
      SleepInfo.value.splice(index, 1);
    }
  }
  if (activetype.value === "kehu") {
    const index = SleepInfo.value.findIndex((e: any) => e.Id === id);
    if (index == -1) {
      const i = SleepInfo.value.findIndex(
        (e: any) => e.TypeId === addParams.value.Id
      );
      if (i === -1) {
        SleepInfo.value.push({
          Id: id,
          TypeId: addParams.value.Id,
        });
      } else {
        SleepInfo.value[i] = {
          Id: id,
          TypeId: addParams.value.Id,
        };
      }
    } else {
      // 使用splice删除指定下标的元素
      SleepInfo.value.splice(index, 1);
    }
  }
  current.value = id;
  const res: any = await GetSleepDetail({
    Id: id,
  });
  if (res.Tag === 1) {
    productInfo.value = res.Data;
  } else {
    store.error(res.Message); // 错误提示
  }
};
const productList = ref([]) as any;
const SleepInfo = ref([]) as any;
const GetSleepFun = async (item: any) => {
  addParams.value = JSON.parse(JSON.stringify(item));
  const res: any = await GetSleep({
    TypeId: item.Id, //来自下拉框数据6.6.2
    TitleA: "",
    IsResponsibility: 0, //默认0  ，是否责任页面数据，1 是  0 否
    CurrentPage: 1, // 当前页
    PageSize: 1000, //每页的条数
  });
  if (res.Tag === 1) {
    productList.value = res.Data;
    if (activetype.value === "zeren") {
      const k = SleepInfo.value.findIndex((e: any) => e.TypeId === item.Id);
      if (k === -1) {
        for (let index = 0; index < res.Data.length; index++) {
          const element = res.Data[index];
          SleepInfo.value.push({
            Id: element.Id,
            TypeId: item.Id,
          });
        }
      }
    }
    console.log(JSON.stringify(SleepInfo.value));
  } else {
    store.error(res.Message); // 错误提示
  }
};
const DeleteSleepFun = async () => {
  const res: any = await DeleteSleep({
    Id: productInfo.value.Id, //ID 查询接口返回
    Operator: Cookies.get("token"),
  });
  if (res.Tag === 1) {
    preview.value = false;
    GetSleepFun(addParams.value.Id);
    productInfo.value = JSON.parse(JSON.stringify(addPa));
    store.success(res.Message); // 错误提示
  } else {
    store.error(res.Message); // 错误提示
  }
};
const EditSleepFun = async () => {
  productInfo.value.Operator = Cookies.get("token");
  const res: any = await EditSleep(productInfo.value);
  if (res.Tag === 1) {
    preview.value = false;
    GetSleepDetailFun(productInfo.value.Id);
    store.success(res.Message); // 错误提示
  } else {
    store.error(res.Message); // 错误提示
  }
};
const DeleteSleepTypeFun = async () => {
  const res: any = await DeleteSleepType({
    Id: addParams.value.Id, //ID 查询接口返回
    Operator: Cookies.get("token"),
  });
  if (res.Tag === 1) {
    reLoad();
    GetSleepTypeFun();
    store.success(res.Message); // 错误提示
  } else {
    store.error(res.Message); // 错误提示
  }
};
const UpdateSleepTypeFun = async () => {
  addParams.value.Operator = Cookies.get("token");
  const res: any = await UpdateSleepType(addParams.value);
  if (res.Tag === 1) {
    reLoad();
    GetSleepTypeFun();
    store.success(res.Message); // 错误提示
  } else {
    store.error(res.Message); // 错误提示
  }
};
const InsertSleepTypeFun = async () => {
  addParams.value.Operator = Cookies.get("token");
  const res: any = await InsertSleepType(addParams.value);
  if (res.Tag === 1) {
    GetSleepTypeFun();
    reLoad();
    store.success(res.Message); // 错误提示
  } else {
    store.error(res.Message); // 错误提示
  }
};
const reLoad = () => {
  addParams.value = {
    TypeName: "",
    SortNum: 0,
  };
};
const GetSleepTypeFun = async () => {
  const res: any = await GetSleepType({
    TypeName: "", //ID 查询接口返回
  });
  if (res.Tag === 1) {
    classList.value = res.Data;
  } else {
    store.error(res.Message); // 错误提示
  }
};
GetSleepTypeFun();
onMounted(() => {
  const resizeObserver = new ResizeObserver(handleResize);
  if (container.value) {
    resizeObserver.observe(container.value);
  }

  return () => {
    if (container.value) {
      resizeObserver.unobserve(container.value);
    }
    resizeObserver.disconnect();
  };
});
</script>
<style lang="less" scoped>
.Business {
  width: 100%;
  min-height: 100%;
  padding-bottom: 50px;
  background: #ffffff;
  .out-btn {
    z-index: 100;
    position: fixed;
    top: 10px;
    right: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    background-color: #000000;
    color: #ffffff;
    border-radius: 4px;
    font-size: 14px;
  }
  .card-view {
    padding: 5px 0;
    display: flex;
    background: #ececec;
    border-bottom: 1px dashed #f8f8f8;
    overflow-x: auto;
    .card {
      position: relative;
      border: 2px solid #dddddd;
      padding: 0 0 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .icon-btn {
        position: absolute;
        &.active {
          background: #1edb1a;
        }
        margin-left: 5px;
        width: 18px;
        height: 18px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon {
          width: 15px;
          height: 15px;
        }
      }
      &.active {
        border: 2px solid #1edb1a;
      }
      .icon {
        width: 30px;
        height: 30px;
      }
      margin: 5px;
      width: 100px;
      min-height: 100px;
      img {
        width: 100px;
        height: 100px;
      }
      .title {
        height: 36px;
        margin-top: 5px;
        font-size: 12px;
        font-weight: bold;
      }
    }
  }
  .nav-view {
    position: relative;
    background-color: #f5f5f5;
    padding: 20px 0 20px;
    .btn-list {
      display: flex;
      padding: 0 20px;
      margin-bottom: 20px;
      .btn {
        &.active {
          background: #000000;
          color: #ffffff;
        }
        border-radius: 4px;
        margin-right: 10px;
        padding: 5px 10px;
        font-size: 12px;
        border: 1px solid #6e6a6a;
        color: #6e6a6a;
      }
    }
  }
  .nav-list-view {
    display: flex;
    justify-content: center;
    align-items: center;
    .add {
      .icon {
        width: 20px;
        height: 20px;
      }
    }
    .nav {
      display: flex;
      align-items: center;
      &.active {
        color: #000;
        font-weight: bold;
      }
      .icon-btn {
        &.active {
          background: #1edb1a;
        }
        margin-left: 5px;
        width: 18px;
        height: 18px;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        .icon {
          width: 15px;
          height: 15px;
        }
      }
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #7c7c7c;
      line-height: 37px;
      margin-right: 40px;
    }
  }

  .editor-view {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #f8f8f8;
    .btn {
      font-size: 12px;
      margin: 0 10px;
      padding: 4px 10px;
      background-color: #1edb1a;
      color: #ffffff;
    }
    .eidtor {
      font-size: 12px;
      padding: 4px 10px;
      background-color: red;
      color: #ffffff;
    }
  }
  .content-view {
    position: relative;
    .tool-view {
      top: 100px;
      right: 35px;
      position: fixed;
      display: flex;
      align-items: center;
      flex-direction: column;
      .btn {
        padding: 4px 12px;
        background: #000000;
        color: #ffffff;
        margin: 5px;
        font-size: 12px;
      }
    }
    .top-view {
      width: 50%;
      margin: 60px auto;
      text-align: left;
      .tag {
        font-size: 16px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 22px;
        margin-bottom: 7px;
      }
      .title {
        font-size: 46px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #000000;
        line-height: 65px;
        margin-bottom: 60px;
      }
      .desc {
        font-size: 19px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 34px;
        padding-bottom: 40px;
        white-space: pre-wrap;
      }
    }
    .center-view {
      width: 50%;
      margin: 60px auto;
      text-align: left;
      .title {
        font-size: 26px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #000000;
        line-height: 37px;
        margin-bottom: 22px;
      }
      .desc {
        font-size: 19px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #000000;
        line-height: 35px;
        padding-bottom: 40px;
        white-space: pre-wrap;
      }
    }
    &.no {
      user-select: none;
      opacity: 0.2;
    }
    margin-top: 30px;
    .card-text-view {
      display: flex;
      justify-content: center;
      margin-bottom: 74px;
      .card-item {
        position: relative;
        width: 50%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        img {
          &.cotiner {
            object-fit: contain;
            height: auto;
          }
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        &.text {
          padding: 0 80px 0 190px;
        }
        &.textr {
          padding: 0 100px 0 80px;
        }
        .title {
          text-align: left;
          font-size: 32px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #000000;
          line-height: 45px;
          margin-bottom: 30px;
        }
        .line {
          width: 96px;
          height: 4px;
          background: #f3f3f3;
          margin: 26px 0 20px;
        }
        .desc {
          white-space: pre-wrap;
          text-align: left;
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #000000;
          line-height: 32px;
        }
      }
    }
  }
}
input {
  &.num {
    text-align: center;
    width: 30px;
    margin-left: 5px;
  }
  height: 26px;
}
.copper-view {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
}
.add-btns {
  text-align: center;
  padding: 20px;
  color: #ffffff;
  background-color: #d2d2d2;
  span {
    background: #cd3755;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
  }
}
.fengmian {
  margin: auto;
  height: 200px;
  width: 300px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
</style>
